@mixin transition($args...) {
  -webkit-transition: $args;
  -moz-transition: $args;
  -ms-transition: $args;
  -o-transition: $args;
  transition: $args;
}

@mixin clearfix {
  &:after {
    content: '';
    display: table;
    clear: both;
  }
}

@mixin box-shadow($top, $left, $blur, $color, $inset: false) {
  @if $inset {
    -webkit-box-shadow: inset $top $left $blur $color;
    -moz-box-shadow: inset $top $left $blur $color;
    box-shadow: inset $top $left $blur $color;
  } @else {
    -webkit-box-shadow: $top $left $blur $color;
    -moz-box-shadow: $top $left $blur $color;
    box-shadow: $top $left $blur $color;
  }
}

@mixin effect-box($scale, $duration) {
  @include transition(all $duration);
  background: #f7f7f7;
  &:hover {
    transform: scale($scale);
    background: white;
    box-shadow: 0 2px 6px 0 rgba($spring-color, 0.1);
  }
}

@mixin links {
  list-style: none;
  padding: 0;
  li {
    position: relative;
    padding-left: 25px;
    &:before {
      $s: 10px;
      content: ' ';
      width: $s;
      height: $s;
      position: absolute;
      top: 8px;
      left: 5px;
      background-repeat: no-repeat;
      background-position: center center;
      background-image: url(../images/icons/chevron-right.svg);
    }
  }
}

@mixin button-dark($background, $color, $padding) {
  display: inline-block;
  border: 0 none;
  background-color: $background;
  border-radius: $spring-radius;
  font-family: $spring-font-family;
  font-size: $spring-font-size;
  line-height: 38px;
  padding: 0 $padding;
  font-weight: normal;
  cursor: pointer;
  text-decoration: none;
  color: rgba($color, 0.9);

  @include transition(all $spring-transition-duration);
  &:hover {
    background-color: darken($background, 3);
    color: $color;
    text-decoration: none;
  }

  &:focus {
    outline: none;
  }
}
